<script lang="ts">
import { defineComponent, ref, toRaw } from "vue";
import { Date } from "@/utils/date";
import { createCalendar } from "@/utils/calendar";
import { listToGroupByKey } from "@/utils/array";

import PopupBottom from "@/components/popup/bottom.vue";

export default defineComponent({
  components: { PopupBottom },
  setup() {
    let pickerCallback: ((date: any, close: () => void) => void) | undefined;

    const visible = ref(false);

    const monthList = ref<
      { month: string; month_str: string; dayList: any[] }[]
    >([]);

    const selectDate = ref("");
    const dateClick = (index: number, index2: number) => {
      pickerCallback?.(toRaw(monthList.value)[index].dayList[index2], () => {
        visible.value = false;
      });
    };

    const show = (
      option: { value?: string; data: any[] },
      callback: (value: any, close: () => void) => void
    ) => {
      visible.value = true;
      selectDate.value = option.value || "";
      monthList.value = listToGroupByKey(option.data, "month").map((i) => {
        return {
          month: i.key,
          month_str: Date.getDate(i.key).format("YYYY年MM月"),
          dayList: createCalendar(i.key, (day, d) => {
            const date = i.list.find((j) => j.date === day.date);
            return {
              ...day,
              ...date,
              isMonth: day.date.includes(i.key),
              isWeek: d % 7 === 0 || d % 7 === 6,
            };
          }),
        };
      });
      pickerCallback = callback;
    };

    return {
      visible,
      monthList,
      selectDate,
      dateClick,
      show,
      weekList: ["日", "一", "二", "三", "四", "五", "六"],
    };
  },
});
</script>

<template>
  <PopupBottom v-model="visible" title="选择日期" :safeAreaInsetBottom="false">
    <view class="date-picker">
      <view class="date-picker-header">
        <view
          class="date-picker-week"
          v-for="(i, d) of weekList"
          :key="i"
          :style="{ color: d === 0 || d === 6 ? '#4e9b93' : '#333333' }"
        >
          {{ i }}
        </view>
      </view>

      <view class="date-picker-wrapper" scroll-y>
        <view v-for="(i, d) of monthList" :key="i.month">
          <div class="date-picker-month">{{ i.month_str }}</div>

          <view class="date-picker-body">
            <view
              class="date-picker-day"
              v-for="(j, x) of i.dayList"
              :key="j.date"
              :style="{
                backgroundColor:
                  j.isMonth && selectDate === j.date ? '#ff7900' : '',
              }"
              @click="dateClick(d, x)"
            >
              <template v-if="j.isMonth">
                <view
                  class="date-picker-date"
                  :style="{
                    color: j.isToday
                      ? selectDate === j.date
                        ? '#ffffff'
                        : j.isWeek
                        ? '#4e9b93'
                        : '#323233'
                      : '#c8c9cc',
                  }"
                >
                  {{ j.text }}
                </view>
                <view
                  class="date-picker-desc"
                  v-if="j.isToday"
                  :style="{
                    color:
                      selectDate === j.date
                        ? '#ffffff'
                        : j.status === 0
                        ? '#cccccc'
                        : j.status === 1
                        ? '#666666'
                        : '#ee5734',
                  }"
                >
                  {{
                    j.status === 1
                      ? `¥${j.price}`
                      : j.status === 2
                      ? "余位紧张"
                      : j.status === 3
                      ? "已约满"
                      : "不可约"
                  }}
                </view>
              </template>
            </view>
          </view>
        </view>

        <view class="date-picker-footer">后续日期暂不可订</view>
      </view>
    </view>
  </PopupBottom>
</template>

<style lang="scss">
.date-picker {
  padding-top: 20rpx;

  .date-picker-header {
    display: flex;
    margin-bottom: 14rpx;
  }

  .date-picker-week {
    width: calc(100% / 7);
    font-size: 28rpx;
    line-height: 72rpx;
    text-align: center;
  }

  .date-picker-wrapper {
    position: relative;
    height: 60vh;
    overflow-y: auto;
  }

  .date-picker-month {
    position: sticky;
    top: 0;
    padding-left: 36rpx;
    font-size: 36rpx;
    color: #2d2d2d;
    line-height: 70rpx;
    font-weight: bold;
    background-color: #fafafa;
    z-index: 2;
  }

  .date-picker-body {
    display: flex;
    flex-wrap: wrap;
  }

  .date-picker-day {
    width: calc(100% / 7);
    height: 84rpx;
    padding-top: 24rpx;
    border-radius: 8rpx;
  }

  .date-picker-date {
    font-size: 32rpx;
    line-height: 44rpx;
    text-align: center;
    font-weight: bold;
  }

  .date-picker-desc {
    font-size: 20rpx;
    color: #666666;
    line-height: 28rpx;
    text-align: center;
  }

  .date-picker-footer {
    height: 100rpx;
    padding-top: 40rpx;
    padding-bottom: env(safe-area-inset-bottom);
    font-size: 24rpx;
    color: #999999;
    line-height: 64rpx;
    text-align: center;
    background-color: #f6f6f6;
  }
}
</style>
